<template>
    <base-breadcrumb class="fixed-container" :title="$route.meta.title">
      <a-card>
          <title-name title="党员信息"></title-name>
          <a-form-model class="flex-model-form"
            ref="addForm"
            :model="detail"
            :rules="rules"
          >
            <a-col :span="8" v-for="(item, index) in formDatas" :key="item.key">
                 <a-form-model-item :label="item.name">
                   <BaseInput :value="formatValue(item)" disabled></BaseInput>
                 </a-form-model-item>
            </a-col>
          </a-form-model>
      </a-card>
      <a-card>
          <title-name title="党费收缴信息"></title-name>
          
          <s-table
              ref="DuesTable"
              tableLayout="fixed"
              size="default"
              rowKey="id"
              :columns="DuesColumns"
              :data="DuestLoadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
          >
          </s-table>
      </a-card>
      <a-card>
          <title-name title="党员发展信息"></title-name>
          
          <s-table
              ref="DevelopmentTable"
              tableLayout="fixed"
              size="default"
              rowKey="id"
              :columns="DevelopmentColumns"
              :data="DevelopmentLoadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
          >
            <template slot="fileList" slot-scope="text, record">
              <span v-for="(item, index) in text">
                <span v-if="index > 0">,</span>
                <a :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
                  target="_parent"
                >{{ item.fileName + item.suffixName }}</a>
              </span>
            </template>
          </s-table>
      </a-card>
      <div class="btn_box tool-btns--fixed page-btn-right-top">
        <a-button class="ml12" @click="handleClose">关闭</a-button>
      </div>
    </base-breadcrumb>
</template>

<script>
import Vue from 'vue'
import BaseInput from '@/components/BaseInput'
import { STable } from '@/components' // 表格
import { getPartyMemberById, getPagePartyMemberDevelopment, getPagePartyMemberDues } from '@/api/partyMasses'
const DuesColumns = [
  {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      customRender() {
          return arguments[2] + 1
      },
  },
  {
      title: '党费缴纳基数',
      ellipsis: true,
      dataIndex: 'payBase',
  },
  {
      title: '党费缴纳额度（元）',
      ellipsis: true,
      dataIndex: 'payLimit',
  },
  {
      title: '党费缴纳截止月份',
      ellipsis: true,
      dataIndex: 'deadline',
  },
  {
      title: '具体起始时间',
      ellipsis: true,
      dataIndex: 'startTime',
  },
  {
      title: '具体截止时间',
      ellipsis: true,
      dataIndex: 'endTime',
  },
  {
      title: '记录人',
      dataIndex: 'creatorName',
      ellipsis: true,
  },
  {
      title: '记录时间',
      dataIndex: 'createTime',
      ellipsis: true,
  }
]
const DevelopmentColumns = [
  {
      title: '序号',
      width: 80,
      dataIndex: 'index',
      customRender() {
          return arguments[2] + 1
      },
  },
  {
      title: '发展阶段',
      ellipsis: true,
      dataIndex: 'phaseName',
  },
  {
      title: '时间节点',
      ellipsis: true,
      dataIndex: 'node',
  },
  {
      title: '详细信息',
      ellipsis: true,
      dataIndex: 'detail',
  },
  {
      title: '证明材料',
      ellipsis: true,
      dataIndex: 'fileList',
      scopedSlots: { customRender: 'fileList' },
  },
  {
      title: '记录人',
      dataIndex: 'creatorName',
      ellipsis: true,
  },
  {
      title: '记录时间',
      dataIndex: 'createTime',
      ellipsis: true,
  }
]
export default {
  name:'a'+ Date.now(),
    // name: 'AddPartyOrg',
    components: {
      BaseInput,
      STable,
    },
    computed: {
      token() {
        return Vue.getAcloudProvider().getAccessToken()
      }
    },
    mounted() {
      const param = {id: this.$route.query.id};
      getPartyMemberById(param).then((res) => {
        if (res && res.code == 0) {
          this.detail = res.data;
        }
        // this.detail.form = res.data;
      })
    },
    data() {
        return {
          DuesColumns,
          DevelopmentColumns,
          DuestLoadData: (parameter) => {
              const query = {
                partyMemberId: this.$route.query.id
              }
              const requestParameters = Object.assign({}, parameter, { query: query })
              if (this.editable) {
                requestParameters.needCount = false;
              }
              return getPagePartyMemberDues(requestParameters).then((res) => {
                const obj = {
                  data: res.data.list || [],
                  totalSize: res.data.total,
                  currentPage: res.data.pageNum
                }
                return obj
              });
          }, // 加载数据方法 必须为 Promise 对象
          DevelopmentLoadData: (parameter) => {
              const query = {
                partyMemberId: this.$route.query.id
              }
              const requestParameters = Object.assign({}, parameter, { query: query })
              return getPagePartyMemberDevelopment(requestParameters).then((res) => {
                const obj = {
                  data: res.data.list || [],
                  totalSize: res.data.total,
                  currentPage: res.data.pageNum
                }
                return obj
              });
          }, // 加载数据方法 必须为 Promise 对象
          btnloading: false,
          showDuesModal: false,
          showDevelopmentModal: false,
          formDatas: [
            {key: 'userName', name: '党员名称'},
            {key: 'typeName', name: '党员类型'},
            {key: 'proPartyTime', name: '确定预备党员时间'},
            {key: 'positiveTime', name: '预备转正时间'},
            {key: 'employeeNum', name: '员工编号'},
            {key: 'phone', name: '手机号码'},
            {key: 'currentPost', name: '当前岗位'},
            {key: 'idCard', name: '身份证号'},
            {key: 'sex', name: '性别', map: { '0': '女', '1': '男'}},
            {key: 'birthday', name: '出生日期'},
            {key: 'age', name: '年龄'},
            {key: 'specialitieMax', name: '最高学历'},
            {key: 'email', name: '邮箱'},
            {key: 'partyOrgName', name: '当前所在党支部'},
            {key: 'partyPost', name: '党内职务'},
            {key: 'statusName', name: '状态'},
          ],
          detail: {
            // userName: '多少度多少度多少度多少度多少度多少度多少度',
            // type: 1,
            // proPartyTime: '2020-12-08'
          },
          rules: {
            type: [ { required: true, message: '请选择当前党员类型', trigger: 'change' } ],
            proPartyTime: [ { required: true, message: '请选择确定预备党员时间', trigger: 'change' } ],
            positiveTime: [ { required: true, message: '请选择预备转正时间', trigger: 'change' } ],
          }
        }
    },
    watch:{
      // 'detail.type': {
      //   handler(nv, old) {
      //     if (nv !== 1) {
      //     }
      //   }
      // }
    },
    methods: {
      formatValue(item) {
        const value = this.detail[item.key];
        if (item.map) {
          return item.map[value]
        }
        return value
      },
      handleClose() {
        this.$multiTab.close(this.$route.fullpath);
      },
    }
}
</script>

<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
  .btn_box .ant-affix{
    overflow: hidden;
    button {
      float: right;
      margin-left: 20px;
    }
  }
</style>
